<template>
	<div class="index" >
    <div id="zhunkaozheng">
      <div style="border: 1px #ccc solid; width: 850px; padding: 50px;">
        <div style="font-size: 18px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;">奥德欧标德语考试</div>
        <div style="font-size: 22px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;">准考证</div>
        <div style="margin-bottom: 20px; display: flex; justify-content: center; align-items: center;">
          <div style="flex: 200px;"><img src="../../../static/img/osd1.png" style="width: 200px; height: 250px;"></div>
          <div style="flex: 500px; margin-left: 40px;">
            <div style="margin-bottom: 20px;  display: flex; align-items: center;">
              <div style="flex: 1;">姓名（中文）：{{all.prename_cn}}{{all.name_cn}}</div>
              <div style="flex: 1;">姓名（英文/拼音）：{{all.prename_eng}}{{all.name_eng}}</div>
            </div>
            <div style="margin-bottom: 20px;  display: flex; align-items: center;">
              <div style="flex: 1;">性别：{{all.sex}}</div>
              <div style="flex: 1;">国籍：{{all.country}}</div>
            </div>
            <div style="margin-bottom: 20px;  display: flex; align-items: center;">
              <div style="flex: 1;">出生地：{{all.birthadr}}</div>
              <div style="flex: 1;">出生日期：{{all.birth}}</div>
            </div>
            <div style="margin-bottom: 20px;">证件号：{{all.sex}}</div>
            <div style="margin-bottom: 20px;">考点：{{all.sex}}</div>
            <div style="margin-bottom: 20px;">考点地址：{{all.sex}}</div>
          </div>
        </div>
        <div style="margin-bottom: 20px; border-bottom: 1px #ccc solid;">
          <div style="display: flex; text-align: center; border-right: 1px #ccc solid;  ">
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
          </div>
          <div style="display: flex; text-align: center; border-right: 1px #ccc solid; ">
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
          </div>
          <div style="display: flex; text-align: center; border-right: 1px #ccc solid;  ">
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
          </div>
          <div style="display: flex; text-align: center; border-right: 1px #ccc solid;  ">
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
            <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
          </div>
          <!-- <table style="width: 100%; text-align: center;" cellspacing="0" >
            <tr>
              <th>考试时间</th><th>考试科目</th><th>考场</th><th>座位号</th>
            </tr>
            <tr>
              <td>考试时间</td><td>考试时间</td><td>考试时间</td><td>考试时间</td>
            </tr>
          </table> -->
          <!-- <el-table :data="tableData"  border  style="width: 100%">
              <el-table-column prop="date" label="考试时间"></el-table-column>
              <el-table-column prop="date" label="考试科目"></el-table-column>
              <el-table-column prop="date" label="考场"></el-table-column>
              <el-table-column prop="date" label="座位号"></el-table-column>
          </el-table> -->
          <!-- 1.58:1 -->
        </div>
        <div style="">
          <div class="flexc" style="margin-bottom: 20px;">
            <div style="width: 200px;">身份证正面</div>

            <div style="margin-left: 40px; width: 400px; min-height: 200px;" >
              <el-upload class="avatar-uploader "action="#" :on-change="uploadok" :auto-upload="false" :show-file-list="false" v-if="!imgurl">
                <div>上传</div>
              </el-upload>
              <img :src="imgurl" style="width: 100%;" v-if="imgurl">
            </div>
          </div>
          <div class="flexc">
            <div style="width: 200px;">身份证反面</div>
            <div style="margin-left: 40px; width: 400px; min-height: 200px;" @click="showlog(2)"><img src="../../../static/img/osd1.png" style="width: 100%;"></div>
          </div>
        </div>


      </div>
    </div>

    <el-button type="primary" round @click="dayin">打印</el-button>

    <el-dialog title="图片剪切" center :visible.sync="log" :close-on-press-escape="false" :close-on-click-modal="false" width="700px">
      <vue-cropper ref="cropper" :img="imgurl2" :autoCrop="true" :autoCropWidth="660" :autoCropHeight="660"> </vue-cropper>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" round @click="log = false">关闭</el-button>
        <el-button type="danger" round @click="baocun">保存</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
  import Print from 'print-js'
  import CropperImage from "./jianqietu.vue";
  import { VueCropper } from 'vue-cropper'
  import chuantu from '../../components/chuantu.vue'
	export default {
		name: 'index',
    components:{
      chuantu,CropperImage,VueCropper
    },
		data() {
			return {
        log:false,
        act:1,
        all:{
          cardtype:"",// 证件类型
          cardid:"",// 证件id
          regtime:"",// 用户注册时间
          email:"",//
          phone:"",// 手机
          pswreset:"",// 是否需要重置密码  1 需要 ，0 不需要
          prename_cn:"",// 中文姓
          name_cn:"",//  中文名
          prename_eng:"",// 英文姓
          name_eng:"",//  英文名
          sex:"",//  性别
          birth:"",// 出生日期
          birthadr:"",// 出生地
          birthcountry:"",//  出生国
          country:"",// 国籍
          address:"",//  邮寄地址
          postid:"",//   邮编
          adr_country:"",// 居住国
          provice:"",//   居住省
          city:"",//   居住城市
          opttime:"",// 最后修改时间
        },
        tableData: [{
                  date: '2016-05-02',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄'
                }, {
                  date: '2016-05-04',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1517 弄'
                }, {
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }, {
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1516 弄'
                }],
        imgurl:"",
        imgurl2:""
			}
		},
		created() {
      this.huoqu()
		},
		mounted() {

		},
		methods: {
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          const reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
      },
      uploadok:function(file){
        this.getBase64(file.raw).then((res) => {
          this.imgurl2 = res
          this.showlog(1)
        });
      },
      showlog:function(val){
        this.act = val
        this.log = true
      },
      baocun:function(){
        this.$refs.cropper.getCropData(data => {
          // do something
          this.imgurl = data
          this.log = false
          console.log(data)
        })
        // this.$refs.cropper.getCropBlob(data => {
        //   // do something
        //   console.log(data)
        // })
      },
      huoqu:function(){
        axios.post(this.IP_URL+'/user/getinfo').then((response)=>{
          if(response.data.errorcode == 0){
            this.all = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },
      dayin:function(){
        setTimeout(function () {
          print({
            printable: 'zhunkaozheng',
            type: 'html',
          })
        }, 500)
        // let printSection = document.getElementById('zhunkaozheng');
        //       let printWindow = window.open('', '_blank');
        //       printWindow.document.write(printSection.innerHTML);
        //       printWindow.document.close();
        //       printWindow.focus();
        //       printWindow.print();
        //       printWindow.close();
      },
      change1:function(){
        this.all.name2 = pinyinPro.pinyin(this.all.name, { toneType: 'none' })


      }
    }
	}
</script>


<style scoped lang="less">

  .vue-cropper{ width: 660px;  height: 660px;}
  // .cropper{
  //   width: 660px;
  //   height: 660px;
  // }
  // .cropper-crop-box{ width: 500px; height: 300px;}

  .tli{ padding: 5px 0; text-align: center; flex: 1;}

  table {
          border-right: 1px solid #000000;
          border-bottom: 1px solid #000000;
          text-align: center;
      }

      table th {
          border-left: 1px solid #000000;
          border-top: 1px solid #000000;
          padding: 5px;
      }

      table td {
          border-left: 1px solid #000000;
          border-top: 1px solid #000000;
           padding: 5px;
      }
</style>
